<template>
  <div class="dashboard-container">
    <div
      class="chart"
      id="totalThings"
      style="width: 400px; height: 400px"
    ></div>
    <div class="chart" id="orders" style="width: 600px; height: 400px"></div>
    <div
      class="chart"
      id="visitStats"
      style="width: 400px; height: 400px"
    ></div>
  </div>
</template>

<script setup>
import { getOverview } from "@/apis/overview";
import { ref, reactive, onMounted } from "vue";
import * as echarts from "echarts";

const map = ref({});

const fetchData = async () => {
  try {
    const response = await getOverview(); // 替换为你的API端点
    console.log(response.data);
    map.value = response.data;
    initCharts();
  } catch (error) {
    console.error(error);
  }
};

const initCharts = () => {
  initTotalThingsChart();
  initOrdersChart();
  initVisitStatsChart();
};

const initTotalThingsChart = () => {
  const chartDom = document.getElementById("totalThings");
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: "商品统计",
    },
    tooltip: {},
    legend: {
      data: ["数量"],
    },
    xAxis: {
      data: ["商品总数", "七日新增"],
    },
    yAxis: {},
    series: [
      {
        name: "数量",
        type: "bar",
        data: [map.value.spzs, map.value.qrxz],
      },
    ],
  };
  myChart.setOption(option);
};

const initOrdersChart = () => {
  const chartDom = document.getElementById("orders");
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: "订单统计",
    },
    tooltip: {},
    legend: {
      data: ["订单数", "人数"],
    },
    xAxis: {
      data: ["未付订单", "已付订单", "取消订单", "已退款"],
    },
    yAxis: {},
    series: [
      {
        name: "订单数",
        type: "bar",
        data: [map.value.wfdd, map.value.yfdd, map.value.qxdd, map.value.ytkdd],
      },
      {
        name: "人数",
        type: "bar",
        data: [map.value.wfddrs, map.value.yfddrs, map.value.qxddrs, map.value.ytkdd],
      },
    ],
  };
  myChart.setOption(option);
};

const initVisitStatsChart = () => {
  const chartDom = document.getElementById("visitStats");
  const myChart = echarts.init(chartDom);
  const option = {
    title: {
      text: "网站流量",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["PV", "UV"],
    },
    xAxis: {
      type: "category",
      data: map.value.visitList.map((item) => item.day),
    },
    yAxis: {
      
    },
    series: [
      {
        name: "PV",
        type: "line",
        data: map.value.visitList.map((item) => item.pv),
      },
      {
        name: "UV",
        type: "line",
        data: map.value.visitList.map((item) => item.uv),
      },
    ],
  };
  myChart.setOption(option);
};

// 生命周期
onMounted(() => {
  // 页面加载的时候立刻执行一次请求
  fetchData();
});
</script>

<style lang="less">
.dashboard-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.chart {
  width: 40px; /* 调整为48%以适应两列布局并留出间隙 */
  height: 400px;
  margin-bottom: 20px;
}
</style>
